<template>
  <div>
    <div class="row-header">
      <el-form ref="form" :model="form" label-width="50px" :inline="$store.state.app.screenWidth<992?false:true" :rules="rules">
        <el-form-item label=" " prop="agreementType">
          <el-select v-model="form.agreementType" placeholder="请选择协议类型">
            <el-option
              v-for="item in agreementTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" " prop="agreementState">
          <el-select v-model="form.agreementState" placeholder="请选择协议状态">
            <el-option
              v-for="item in agreementStateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button class="sd-search-button" size="small" icon="el-icon-search" @click="searchForm('form')">查询</el-button>
        <el-button class="sd-search-button" size="small" icon="el-icon-refresh-right" @click="resetForm('form')">重置</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-button class="sd-search-button" icon="el-icon-refresh" size="small" @click="current=1,initData()" >刷新数据</el-button>
      <router-link to="/settings/addAgreement" ><el-button class="sd-search-button" icon="el-icon-plus" size="small" >添加协议</el-button></router-link>
      <router-link to="/settings/agentSignAgreementRecords" ><el-button class="sd-search-button" icon="el-icon-s-check">代理协议签署中心</el-button></router-link>
      <el-table :header-cell-style="{ 'background':'#F2F6FC','color':'#606266' }"
                :data="tableData" class="row-main-table"
                ref="table" tooltip-effect="dark"
                v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)"
      >
        <el-table-column type="index" label="序号" align="center" :width="$store.state.app.screenWidth<992?'830px':'auto'" :fixed="$store.state.app.screenWidth<992?true:false" ></el-table-column>
        <el-table-column prop="title" label="协议标题" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
        <el-table-column prop="dictTypeName" label="协议类型" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
        <el-table-column prop="dictStateName" label="是否开启" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
<!--        <el-table-column prop="content" label="协议内容" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>-->
        <el-table-column label="操作" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'">
          <template slot-scope="scope">
            <el-dropdown trigger="click">
              <div>
                <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="scope.row.dictState=='C_YES'">
                  <el-button class="operation" type="text" @click="doSomeAct(scope.row, 'update')" v-preventReClick>关闭</el-button>
                </el-dropdown-item>
                <el-dropdown-item v-if="scope.row.dictState=='C_NO'">
                  <el-button class="operation" type="text" @click="doSomeAct(scope.row, 'update')" v-preventReClick>开启</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button class="operation" type="text" @click="doSomeAct(scope.row, 'select')" v-preventReClick>查看协议</el-button>
                </el-dropdown-item>
                <el-dropdown-item v-if="scope.row.dictType=='AGENT'">
                  <router-link :to="{path: '/settings/agentSignAgreementRecords',query:{'agreementId': scope.row.id,'agreementTitle':scope.row.title}}"><el-button class="operation" type="text" @click="doSomeAct(scope.row, 'select')" v-preventReClick>签署情况</el-button></router-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow':$store.state.app.screenWidth<992?'scroll':'auto'}">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="row-main-pager"
          :current-page.sync="current"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          background></el-pagination>
      </div>
      <el-dialog
        :title="title"
        :visible.sync="showActDialog"
        width="30%"
        center>
        <span>{{ tipText }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showActDialog = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :title="title"
        :visible.sync="showContentDialog"
        width="50%"
        center>
        <div v-html="content" style="margin: 0 20px"></div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="showContentDialog = false">关  闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getAllAgreement, changAgreementStateById } from '@/api/getData'
export default {
  name: "",
  data() {
    return {
      current: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      tableLoading: false,
      form: {
        agreementType: '',
        agreementState: '',
      },
      rules: {},
      agreementTypeOptions: [
        { value: '', label: '请选择协议类型' },
        { value: 'LOGIN', label: '登录协议' },
        { value: 'C_APP', label: 'C端协议' },
        { value: 'AGENT', label: '代理协议' },
      ],
      agreementStateOptions: [
        { value: '', label: '请选择协议状态' },
        { value: 'C_YES', label: '开启' },
        { value: 'C_NO', label: '关闭' },
      ],
      id: '',
      state: '',
      title: '',
      content: '',
      showActDialog: false,
      showContentDialog: false,
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData(){
      this.tableLoading = true;
      let returnData = await getAllAgreement({
        dictType: this.form.agreementType,
        dictState: this.form.agreementState,
        page: {
          size: this.pageSize,
          current: this.current
        }
      })
      this.tableLoading = false;
      if(returnData._result){
        if(returnData.data.records){
          this.tableData = [];
          this.total = 0;
          for(let item of returnData.data.records){
            this.tableData.push(item);
          }
          this.total = returnData.data.total;
        }
      }

    },
    async doSomeAct(row, type){
      switch (type){
        case 'update':
          this.id = row.id;
          this.title = '';
          switch (row.dictState){
            case 'C_YES':
              this.title = '关闭'+row.title;
              this.tipText = '点击确认按钮会将该协议状态修改为关闭，并且不在向您的所有用户展示当前协议，请问是否立即关闭？';
              this.state = 'C_NO'
              break;
            case 'C_NO':
              this.title = '开启'+row.title;
              this.tipText = '点击确认按钮会将该协议状态修改为开启，您的所有用户都会浏览到当前协议内容，请问是否立即开启？';
              this.state = 'C_YES'
              break;
          }
          this.pagekey = await this.$getPageKey();
          this.showActDialog = true;
          break;
        case 'select':
          this.title = row.title;
          this.content = row.content;
          this.showContentDialog = true;
          break;
      }

    },
    onSubmit(){
      let tip = '';
      switch (this.state){
        case 'C_YES':
          tip = '点击确定开启协议';
          break;
        case 'C_NO':
          tip = '点击确定关闭协议';
          break;
      }

      this.$confirm(`${tip}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let returnData = await changAgreementStateById({
          id: this.id,
          dictState: this.state,
          pagekey: this.pagekey
        })
        this.showActDialog = false;
        if(returnData._result){
          this.initData();
          if(returnData.data.code==10000){
            this.$message({
              type: 'success',
              message: '当前协议状态修改成功!'
            });
          }
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消当前操作'
        });
      });
    },
    handleSizeChange(val){
      this.pageSize = val;
      this.current = 1;
      this.initData();
    },
    handleCurrentChange(val){
      this.current = val;
      this.initData();
    },
    toBack() {
      this.$router.back(-1);
    },
    searchForm(formName){
      this.$refs[formName].validate((valid)=>{
        if(valid){
          this.initData();
        }
      })
    },
    resetForm(formName){
      this.$refs[formName].resetFields();
    },
  }
}
</script>

<style scoped>

</style>
